<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="LoginFrom.username"
        name="username"
        label="手机号"
        placeholder="用户名"
        :rules="[{ required: true, message: '请输入11位手机号' }]"
      />
      <van-field 
        :rules="[{required: true,  message: '请输入验证码' }]"
      />
      <button @click="yzm"><p>获取验证码</p></button>
      <!-- <input type="请输入验证码"> <button @click="yzm">获取验证码</button> -->
      <van-field
        v-model="LoginFrom.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        @click="submit"
      >
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
let router=new useRouter()
import { reactive } from "vue";
import { loginApi } from "@/api/api";

let LoginFrom = reactive({
  username: "",
  password: "",
});

let shiyi=/^[0-9]{11}$/
import { showToast } from "vant";
import { useRouter } from "vue-router";
const submit = () => {
  loginApi(LoginFrom.username, LoginFrom.password).then((res) => {
    localStorage.setItem('token',res.data.token)
   localStorage.setItem('username',res.data.username)
    if (res.data.code == 0) {
      showToast({
        type: "success",
        message: "登录成功",
        onClose()
        {
             router.push('/home/my')
        }
      });
    } else {
      showToast({
        type: "fail",
        message: "用户或密码错误",
      });
    }
  });
};
</script>

<style lang="scss" scoped>
</style>